<template>
  <div>
    <div class="footer_wrap">
      <!-- <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a> -->
      <!-- 
        声明式导航的优势:
        router-link 其实是对 a 标签的封装, 本质还是 a 标签
        1. 不用加 #, to 属性设置跳转的路径, 直接以 / 开头即可
        2. 自动加一个高亮的类名 router-link-active
       -->
      <router-link to="/find">发现音乐</router-link>
      <!-- 
        query 传参
        1. 在路径后面加 ?参数名=参数值&参数名2=参数值2
        2. 在 my 组件中接收
       -->
      <!-- <router-link :to="`/my?name=${ username }&age=18`">我的音乐</router-link> -->
      <router-link to="/my">我的音乐</router-link>
      <!-- 
        路径参数
        注意: 需要提前去路由中配置 :参数名
        1. 在路径中传参
        2. 在 part 组件中接收
      -->
      <router-link to="/part/阿东">朋友</router-link>
      <!-- 不管用什么方式, 传参的目的都是为了把数据传递到目标组件内, 所以没有好坏之分, 两者都要掌握 -->
      <!-- 将来更多情况下, 参数比较少就用路径参数, 参数多就用 query 参数 -->
      <!-- 路径参数更好看 -->
    </div>

    <div style="margin-top: 70px">
      <button @click="toFind">跳到发现音乐</button>
      <button @click="toMy">跳到我的音乐</button>
      <button @click="toPart">跳到朋友</button>

    </div>
    <div class="top">
      <!-- 指定路由出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '阿田'
    }
  },
  methods: {
    // 编程式导航的基本跳转
    // 语法: this.$router.push({})
    // 可以根据 name 或 path 进行跳转
    // 但不管是 name 还是 path 都需要在路由配置中提前配置好
    // 这个错误可以不用管:
    // Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/my".
    // 这是 vue-router 更新后提出的一个错误信息, 使用编程式导航时, 不能两次重复跳转到同一个地址
    toFind() {
      // this.$router.push({
      //   // path: '/find'
      //   name: 'find'
      // })
      // 如果你用 path 跳转
      // 可以简写, 只传一个字符串表示进行 path 跳转
      this.$router.push('/find')
    },
    toMy() {
      // 编程式导航: 使用 js 进行跳转
      // 根据 path / name 跳转
      this.$router.push({
        // path + query 传参
        // 路径后面拼接参数 ?参数名=参数值&参数名=参数值
        // path: '/my?name=阿田&age=18',
        path: '/my',
        query: { // 本质上也是在往 path 进行拼接
          name: '阿田',
          age: 18
        }
        // 如果使用 path 进行的跳转, 会忽略掉 params 参数
        // 如果用 path 跳转, 只有一种传参方式: query
        // params: {
        //   name: '阿兴',
        //   age: 20
        // }

        // name + query 和 name + params 传参
        // 将来这种传参方式用的非常少
        // name: 'my',
        // name + query 和 path + query 本质是一样的, 咱们记 path + query就够了
        // query: {
        //   name: '阿田',
        //   age: 18
        // },
        // 将来用的比较少, 原因是刷新后会丢失
        // params: {
        //   name: '阿黄',
        //   age: 20
        // }
      })
      // 不论用什么方式进行跳转传参, 都是用相同的方式接收参数
      // 所有传参的搭配方式:
      // path + query  常用1, 因为简单 √
      // name + query
      // name + params

      // 注意事项:
      // $route 和 $router 的区别?
      // $route 是路由参数对象, 用于获取路由传递的参数
      // $router 是路由对象, 用于跳转
    },
    toPart() {
      // 第四种传参方式: 路径参数  常用2 √
      this.$router.push('/part/阿田')
    }
  }
}
</script>

<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
.top {
  padding-top: 62px;
}

.router-link-active {
  background-color: black !important;
}
</style>